<template>
  <div>
    <v-card>
      <v-card-title>
        <v-btn small color="primary">新增品牌</v-btn>
        <v-spacer></v-spacer>
        <v-spacer></v-spacer>
        <v-spacer></v-spacer>
        <v-text-field
          v-model="search"
          label="关键字搜索品牌"
          clearable
          append-icon="search"
          hide-details
        ></v-text-field>
      </v-card-title>
      <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrands"
        :loading="loading"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center">
            <img
              v-if="props.item.image"
              :src="props.item.image"
              width="130"
              height="40"
            />
            <span v-else>无</span>
          </td>
          <td class="text-xs-center">{{ props.item.letter }}</td>
          <td class="text-xs-center">
            <v-btn class="mx-2" small color="info">
              <v-icon>mdi-pencil</v-icon>
            </v-btn>
            <v-btn class="mx-2" small color="error">
              <v-icon>mdi-delete</v-icon>
            </v-btn>
          </td>
        </template>
      </v-data-table>
    </v-card>
  </div>
</template>

<script>
export default {
  name: "MyBrand",
  data() {
    return {
      search: "",
      totalBrands: 0,
      loading: true,
      pagination: {},
      headers: [
        { text: "id", align: "center", value: "id" },
        { text: "名称", align: "center", sortable: false, value: "name" },
        { text: "LOGO", align: "center", sortable: false, value: "image" },
        { text: "首字母", align: "center", value: "letter", sortable: true },
        { text: "操作", align: "center", value: "id", sortable: false },
      ],
      brands: [],
    };
  },
  mounted() {
    // 钩子函数在渲染页面后执行
    this.initDataServer();
  },
  watch: {
    pagination: {
      deep: true,
      handler() {
        this.initDataServer();
      },
    },
    search: {
      handler() {
        this.initDataServer();
      },
    },
  },
  methods: {
    initDataServer() {
      this.loading = true;
      console.log("pagination分页属性", this.pagination);
      this.$http.get("/item/brand/page", {
          params: {
            key: this.search,
            page: this.pagination.page,
            rows: this.pagination.rowsPerPage,
            sortBy: this.pagination.sortBy,
            desc: this.pagination.descending,
          },
        })
        .then((resp) => {
          console.log("返回数据brand:", resp);
          this.brands = resp.data.items;
          this.totalBrands = resp.data.total;
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped>
</style>